<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算值</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
    <script>
    Vue.createApp(
      {
        data(){
          return{
            //这里是属性
            counter:1,speed:3
          }
        },
        mounted(){
          // 这是在渲染后执行
          console.log('page load atuo show !');
          setInterval(()=>{
            this.counter +=1
        },1000)
        },

        methods:{
          //这是方法
          getDate(){
            return Date.now();
          }
        }, computed:{
        //这是属性，此值不会重新渲染
        total(){return Date.now()}
      },
        template:`
        <div>{{  counter*speed }}</div>
        <div>{{getDate()}}</div>
        <!--下面这行不更新-->
        <div>{{ total  }}</div>
        `

      }
    ).mount('#app')

</script>
</body>
</html>
